<template>
  <div class="page-container">
		<!--工具栏-->
		<div class="toolbar" style="float:left;padding-top:10px;">
			<el-form :inline="true" :model="filters" :size="size">
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="角色名" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" icon="el-icon-search" @click="findPage">{{$t('action.search')}}</el-button>
					<!-- <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:role:select" type="primary" @click="findPage()"/> -->
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:role:save" type="primary" @click="handleAdd" />
				</el-form-item>
			</el-form>
		</div>
    <!-- 表格数据 -->
		<cs-table :table-data="tableData"
							:table-label="tableLabel"
							@handleButton="handleButton"
              :loading="loading"
              @handleToggleAllSelection="handleToggleAllSelection"
							:table-option="tableOption"
              ref="multipleTableDevice"
              >
			<template slot="status" slot-scope="scope">
				<el-tag v-if="scope.row.status===0">启用</el-tag>
				<el-tag v-if="scope.row.status===1" type="success">禁用</el-tag>
			</template>
		</cs-table>
    <!-- 分页 -->
		<el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageRequest.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageRequest.pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
			style="text-align: right;"
			>
    </el-pagination>
    <!-- 对话框 -->
    <add-or-update ref="addorupdateForm" @refreshTable="findPage"/>
  </div>
</template>

<script>
import CsTable from "@/components/cs-table"
import KtButton from "@/views/Core/KtButton"
import AddOrUpdate from './components/addorupdate'
import { format } from "@/utils/datetime"
import { getAuthGroupListPage, delAuthGroupItem } from '@/api/auth/group'
import { getMenu } from '@/api/auth/menu'
import { getTreeDept } from '@/api/auth/user'
export default {
	components:{
		CsTable,
    KtButton,
    AddOrUpdate
	},
	data() {
		return {
			size: 'small',
			filters: {
				keyword: ''
			},
      loading: true,
			tableData: [],
			tableLabel: [
        { label: '名称', param: 'roleName', align: 'center', sortable: false, isShow: true },
        { label: '描述', param: 'description', align: 'center', isShow: true },
        { label: '排序', param: 'sort', align: 'center', sortable: false, isShow: true },
        { label: '状态', param: 'status', align: 'center', sortable: false, slot: true, isShow: true }
      ],
			tableOption: {
        label: '操作',
        width: '200',
        options: [
          { label: '编辑', type: '', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:role:update' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:role:delete' }
        ]
      },
			pageRequest: { pageNo: 1, pageSize: 10 },
			totalPage: 0
		}
	},
	mounted() {
    this.findPage()
	},
	methods: {
    // 操作栏点击
		handleButton(methods, row, index) {
      // 修改
      if (methods.methods === 'audit') {
        this.handleEdit(methods.row)
      } else if (methods.methods === 'delete') { // 删除
        this.handleDelete(methods.row)
      }
    },
		// 每页数
		sizeChangeHandle (val) {
			this.pageRequest.pageSize = val
			this.pageRequest.pageNo = 1
			this.findPage()
		},
		// 当前页
		currentChangeHandle (val) {
			this.pageRequest.pageNo = val
			this.findPage()
		},
		// 获取分页数据
		findPage() {
		  this.loading = true
      this.pageRequest.keyword = this.filters.keyword
      
			getAuthGroupListPage(this.pageRequest).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.rows
          this.totalPage = res.data.totalRows
          this.loading = false
          // this.$nextTick(() => {
          //   for (let i = 0; i < this.tableData.length; i++) {
          //     this.$refs.multipleTableDevice.toggleRowSelection(
          //       this.tableData[i],
          //       true
          //     )
          //   }
          // })
        }
			})
    },
    handleToggleAllSelection() {
    },
		// 显示新增界面
		handleAdd: function () {
      // 初始化对话框
      this.$nextTick(() => {
        this.$refs.addorupdateForm.init('create', {})
      })
		},
		// 显示编辑界面
		handleEdit: function (params) {
      // 编辑 --- 回显数据
      this.$nextTick(() => {
        this.$refs.addorupdateForm.init('update', params)
      })
    },
    // 删除
		handleDelete(data) {
			this.$confirm('确认删除这条数据？', '提示', {}).then(() => {
				delAuthGroupItem(data.roleId).then(() => {
					this.findPage()
				})
			}).catch(() => {})
		}
	}
}
</script>
<style scoped>
</style>
